<template>
  <div ref="qz-zoom" class="qz-zoom">
    <!-- 中图 -->
    <div @mousemove="onMove" class="qz-zoom__mid">
      <!-- 中图 -->
      <img style="width: 100%" :src="images[current].mid_image" alt />
      <!-- 大图 -->
      <div class="qz-zoom__big">
        <img
          :style="{marginLeft: bigLeft + 'px', marginTop: bigTop + 'px'}"
          width="800"
          height="800"
          :src="images[current].big_image"
          alt
        />
      </div>
      <!-- 黄色显示层 -->
      <div :style="{left: moveLeft + 'px', top: moveTop + 'px'}" class="qz-zoom__mask"></div>
    </div>

    <!-- 小图列表 -->
    <div class="qz-zoom__sm">
      <div class="row">
        <!-- 左按钮 -->
        <div @click="left" class="col-1 qz-zoom__lbtn">
          <img
            src="https://static.360buyimg.com/item/unite/1.0.97/components/default/preview/i/disabled-prev.png"
            alt
          />
        </div>
        <!-- 图片列表 -->
        <div class="col-10 qz-zoom__list">
          <ul class="qz-zoom__ul" :style="ulStyle">
            <li
              @mouseover="current = index"
              :class="{'is-selected': index === current }"
              v-for="(item, index) in images"
              :key="index"
              class="qz-zoom__li"
            >
              <img :src="item.sm_image" alt />
            </li>
          </ul>
        </div>
        <!-- 右按钮 -->
        <div @click="right" class="col-1 qz-zoom__rbtn">
          <img
            src="https://static.360buyimg.com/item/unite/1.0.97/components/default/preview/i/disabled-next.png"
            alt
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      marginLeft: 0, // 小图移动的位置
      moveLeft: 0,
      moveTop: 0,
      bigLeft: 0, // 大图的位置
      bigTop: 0, // 大图的位置
      current: 0, // 当前要显示的图片的下标
      pos: {
        // 组件在页面中的位置
        left: 0,
        top: 0
      },
      images: [
        {
          sm_image:
            "http://img14.360buyimg.com/n5/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg",
          mid_image:
            "http://img14.360buyimg.com/n1/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg",
          big_image:
            "http://img14.360buyimg.com//n0/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg"
        },
        {
          sm_image:
            "http://img14.360buyimg.com/n5/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg",
          mid_image:
            "http://img14.360buyimg.com/n1/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg",
          big_image:
            "http://img14.360buyimg.com//n0/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg"
        },
        {
          sm_image:
            "http://img14.360buyimg.com/n5/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg",
          mid_image:
            "http://img14.360buyimg.com/n1/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg",
          big_image:
            "http://img14.360buyimg.com//n0/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg"
        },
        {
          sm_image:
            "http://img14.360buyimg.com/n5/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg",
          mid_image:
            "http://img14.360buyimg.com/n1/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg",
          big_image:
            "http://img14.360buyimg.com//n0/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg"
        },
        {
          sm_image:
            "http://img14.360buyimg.com/n5/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg",
          mid_image:
            "http://img14.360buyimg.com/n1/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg",
          big_image:
            "http://img14.360buyimg.com//n0/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg"
        },
        {
          sm_image:
            "http://img14.360buyimg.com/n5/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg",
          mid_image:
            "http://img14.360buyimg.com/n1/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg",
          big_image:
            "http://img14.360buyimg.com//n0/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg"
        },
        {
          sm_image:
            "http://img14.360buyimg.com/n5/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg",
          mid_image:
            "http://img14.360buyimg.com/n1/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg",
          big_image:
            "http://img14.360buyimg.com//n0/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg"
        },
        {
          sm_image:
            "http://img14.360buyimg.com/n5/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg",
          mid_image:
            "http://img14.360buyimg.com/n1/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg",
          big_image:
            "http://img14.360buyimg.com//n0/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg"
        },
        {
          sm_image:
            "http://img14.360buyimg.com/n5/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg",
          mid_image:
            "http://img14.360buyimg.com/n1/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg",
          big_image:
            "http://img14.360buyimg.com//n0/jfs/t1/105676/38/16654/328539/5e7eecefE339efb67/5eb994667332c19b.jpg"
        },
        {
          sm_image:
            "http://img14.360buyimg.com/n5/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg",
          mid_image:
            "http://img14.360buyimg.com/n1/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg",
          big_image:
            "http://img14.360buyimg.com//n0/jfs/t1/86315/39/16872/191353/5e7eecefE02e46be7/782976b1bdf55bec.jpg"
        }
      ]
    };
  },
  computed: {
    ulStyle() {
      return {
        // 70: li的 width + margin
        width: this.images.length * 70 + "px",
        marginLeft: this.marginLeft + "px"
      };
    }
  },
  mounted() {
    this.pos.left = this.$refs["qz-zoom"].offsetLeft;
    this.pos.top = this.$refs["qz-zoom"].offsetTop;
    // console.log(this.pos.left);
    // console.log(this.pos.top);
  },
  methods: {
    // 放大镜效果
    onMove(e) {
      // console.log(e.clientX)
      // console.log(e.clientY)
      // 遮罩层在左上角的位置
      // this.moveLeft = e.clientX - this.pos.left
      // this.moveTop = e.clientY - this.pos.top
      let left = e.clientX - this.pos.left;
      let top = e.clientY - this.pos.top;

      // 中心的位置只能在 125~225 (中图一半与遮罩层一半) 之间运动
      if (left < 125) {
        this.moveLeft = 0;
      } else if (left > 225) {
        this.moveLeft = 100;
      } else {
        this.moveLeft = left - 125;
      }

      if (top < 125) {
        this.moveTop = 0;
      } else if (top > 225) {
        this.moveTop = 100;
      } else {
        this.moveTop = top - 125;
      }

      // 让大图也按比例移动
      // 大图的容器宽度 = 遮罩层 / 中图容器宽度 * 大图图片宽度 = 250 / 350 * 800 = 571.42
      // 中图与大图的图片比例 = 大图图片宽度 / 中图图片宽度 = 800 / 350 = 2.28
      this.bigLeft = -1 * this.moveLeft * 2.28
      this.bigTop = -1 * this.moveTop * 2.28

    },
    left() {
      if (this.marginLeft > -1 * ((this.images.length - 4) * 70) ) {
        // 移动一张图片
        this.marginLeft -= 70
        // 选中图片的下标 
        this.current++
      }
    },
    right() {
      // 如果不是第一个图片才可以移动
      if (this.marginLeft != 0) {
        this.marginLeft += 70
        this.current--
      }
    }
  }
};
</script>

<style lang="scss">
@import "./styles/zoom.scss";
</style>